<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蘑菇街商城首页</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <div class="menu">
        <!-- 公共头部开始 -->
        <div class="header">
            <ul>
                <li class="l1">
                    首页
                </li>
                <li class="l2">
                    商场
                </li>
                <li class="l3">
                    我的订单
                </li>
                <li class="l4">
                    关于我们
                </li>
            </ul>
        </div>
        <!-- 线 -->
        <div class="heng"></div>
        <!-- 搜索框 -->
        <div class="search">
            <img src="../images/1.png" alt="">
            <div class="list">
                <span>
                    <i></i>
                    目录
                </span>
                <div class="selist">
                    <div class="mark">
                        <div>
                            <span class="s1">主题市场</span>
                        </div>
                        <ul>
                            <li>上衣</li>
                            <li>裙装</li>
                            <li>裤子</li>
                            <li>女鞋</li>
                            <li>美妆</li>
                            <li>包包</li>
                            <li>配饰</li>
                            <li>内衣</li>
                            <li>男友</li>
                            <li>母婴</li>
                            <li>家居</li>
                            <li>食品</li>
                        </ul>
                    </div>
                    <div class="hot">
                        <div>
                            <span class="s1">热门品牌</span>
                            <span class="s2">全部品牌 > </span>
                        </div>
                        <ul>
                            <li>CHANEL</li>
                            <li>SICLY西西里</li>
                            <li>DREAM TREND</li>
                            <li>夏梵尼</li>
                            <li>御泥坊</li>
                            <li>衣阁里拉</li>
                            <li>美康粉黛</li>
                            <li>URBAN REVIVO</li>
                            <li>new balance</li>
                        </ul>
                    </div>
                    <div class="popular">
                        <div>
                            <span class="s1">流行话题</span>
                            <span class="s2">全部话题 > </span>
                        </div>
                        <ul>
                            <li>#怎么多拿压岁钱？穿的"嫩"啊！#</li>
                            <li>#十月最强套装攻略，穿到冬天#</li>
                            <li>#小长假倒计时，明天上班穿这套！#</li>
                            <li>#手把手教你化秋日暖冬装#</li>
                            <li>#国庆七日穿搭打卡计划#</li>
                            <li>#西装+裙子=2019最火情侣档#</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="box">
                <input type="text">
                <button>
                </button>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                </ul>
            </div>
            <ul>
                <li class="l1">
                    消息
                </li>
                <li class="l2">
                    收藏
                </li>
                <li class="l3">
                    <a href="../views/cart.html">购物车</a>
                </li>
                <li class="l4">
                    下载app
                </li>
                <div class="twowet">
                    <img src="../images/4.jpg" alt="">
                    <span>扫一扫 加我</span>
                </div>
            </ul>


            <!-- 个人信息部分 -->
            <div class="info">
                <!-- 登陆状态 -->
                <div class="on">
                    <img src="../images/3.jpg" alt="">
                    <span class="username">靠自己je23rl</span>
                    <ul>
                        <li class="cart">
                            <a href="../views/cart.html">我的订单</a>
                        </li>
                        <li class="self">个人设置</li>
                        <li class="logout">退出</li>
                    </ul>
                </div>
                <!-- 未登录状态 -->
                <div class="off active">
                    <img src="https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png"
                        alt="">
                    <a href="../views/login.html">您好，请登录</a>
                </div>
            </div>


        </div>
        <!-- 右侧导航栏 -->
        <div class="rigsid">
            <img src="../images/3.jpg" alt="">
            <ul>
                <li>首页</li>
                <li>优惠券</li>
                <li>钱包</li>
                <li>客户服务</li>
                <li>商家后台</li>
            </ul>
            <span id="myBtn">
                <p></p>
            </span>
        </div>
        <!-- 公共头部结束 -->
    </div>




    <!-- 首页 -->
    <div class="bigimg">
        <div class="banner">
            <img src="../images/2.jpg" alt="">
            <div class="mark">主题市场</div>
            <div class="leveltwo">
                <ul>
                    <li>
                        <dl>
                            <dt>
                                上衣
                            </dt>
                            <dd>
                                <span>
                                    <a href="" class="span_a_color">T恤
                                        <span class="nav_list_tagicon"></span>
                                    </a>
                                    <a href="" class="span_a_color">时尚套装</a>
                                    <a href="">卫衣</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                裙子
                            </dt>
                            <dd>
                                <span>
                                    <a href="" class="span_a_color">连衣裙
                                        <span class="nav_list_tagicon"></span>
                                    </a>
                                    <a href="">半身裙</a>
                                    <a href="">美裙套装</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                裤子
                            </dt>
                            <dd>
                                <span>
                                    <a href="" class="span_a_color">牛仔裤
                                        <span class="nav_list_tagicon"></span>
                                    </a>
                                    <a href="">休闲裤</a>
                                    <a href="" class="span_a_color">运动裤
                                        <span class="nav_list_tagicon"></span>
                                    </a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                女鞋
                            </dt>
                            <dd>
                                <span>
                                    <a href="">靴子
                                        <span class="nav_list_tagicon"></span>
                                    </a>
                                    <a href="" class="span_a_color">单鞋</a>
                                    <a href="">休闲运动</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                包包
                            </dt>
                            <dd>
                                <span>
                                    <a href="">双肩包
                                        <span class="nav_list_tagicon"></span>
                                    </a>
                                    <a href="" class="span_a_color">拉杆箱</a>
                                    <a href="" class="span_a_color">斜挎包
                                        <span class="nav_list_tagicon"></span>
                                    </a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                男友
                            </dt>
                            <dd>
                                <span>
                                    <a href="" class="span_a_color">T恤</a>
                                    <a href="">休闲裤</a>
                                    <a href="">休闲鞋
                                        <span class="nav_list_tagicon"></span>
                                    </a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                配饰
                            </dt>
                            <dd>
                                <span>
                                    <a href="" class="span_a_color">帽子</a>
                                    <a href="">墨镜</a>
                                    <a href="">眼镜框</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                美妆
                            </dt>
                            <dd>
                                <span>
                                    <a href="">护肤套装
                                        <span class="nav_list_tagicon"></span>
                                    </a>
                                    <a href="">面膜
                                        <span class="nav_list_tagicon"></span>
                                    </a>
                                    <a href="" class="span_a_color">护唇膏</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                家居
                            </dt>
                            <dd>
                                <span>
                                    <a href="" class="span_a_color">床上用品</a>
                                    <a href="">收纳整理</a>
                                    <a href="" class="span_a_color">纸品清洁</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                内衣
                            </dt>
                            <dd>
                                <span>
                                    <a href="">睡衣</a>
                                    <a href="">内裤</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                母婴
                            </dt>
                            <dd>
                                <span>
                                    <a href="">萌宝童装
                                        <span class="nav_list_tagicon"></span>
                                    </a>
                                    <a href="">孕妇装</a>
                                    <a href="" class="span_a_color">萌宝童鞋</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                电器
                            </dt>
                            <dd>
                                <span>
                                    <a href="" class="span_a_color">手机壳</a>
                                    <a href="">卷发棒
                                        <span class="nav_list_tagicon"></span>
                                    </a>
                                    <a href="">移动电源</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                食品
                            </dt>
                            <dd>
                                <span>
                                    <a href="">零食组合
                                        <span class="nav_list_tagicon"></span>
                                    </a>
                                    <a href="">礼包</a>
                                    <a href="" class="span_a_color">进口零食</a>
                                </span>
                            </dd>
                        </dl>
                    </li>
                </ul>

            </div>
            <div class="shop_list">
                <a href="../views/list.html">商品列表</a>
            </div>

            <div class="rig_info">
                <img src="../images/8.png" alt="">
                <img src="../images/9.png" alt="">
            </div>







        </div>
    </div>


    <!-- 渲染的部分 -->


    <div class="big_list">
        <!-- 列表页部分 -->
    <div class="Box container">
      <!-- <ul class="category">
        <li class="active">全部</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
      </ul> -->
      <!-- <ul class="filter">
        <li class="f active">全部</li>
        <li data-filter="hot" class="f">折扣</li>
        <li data-filter="sale" class="f">热销</li>
      </ul> -->
      <!-- <ul class="saleType">
        <li class="s active">全部</li>
        <li class="s">5</li>
        <li class="s">6</li>
        <li class="s">7</li>
        <li class="s">8</li>
        <li class="s">9</li>
      </ul> -->
      <!-- <ul class="sort">
        <li class="sort2 active">默认</li>
        <li data-type="id" data-method="ASC" class="sort2">综合 升序</li>
        <li data-type="id" data-method="DESC" class="sort2">综合 降序</li>
        <li data-type="price" data-method="ASC" class="sort2">价格 升序</li>
        <li data-type="price" data-method="DESC" class="sort2">价格 降序</li>
        <li data-type="sale" data-method="ASC" class="sort2">折扣 升序</li>
        <li data-type="sale" data-method="DESC" class="sort2">折扣 降序</li>
      </ul> -->
      <div class="pagination">
        <span class="pageInfo">1 / 11</span>
        <button class="prev">上一页</button>
        <button class="next">下一页</button>
        <select>
          <option value="12">12</option>
          <option value="16">16</option>
          <option value="20">20</option>
          <option value="24">24</option>
        </select>
      </div>
      <div class="searchBox">
        <input type="text">
      </div>
    </div>
  
    <ul class="Content container">
      <li>
        <div class="show">
          <img src="" alt="">
          <span class="hot active"> HOT </span>
          <span class="sale active"> SALE </span>
        </div>
        <div class="infos">
          <p class="title"> 还是色即是空看书看书看书看书看书肯定会和数据的解读财报不俗的红卫兵 </p>
          <p>
            折扣: 9
          </p>
          <p class="price">
            <del class="old"> ￥ 200.00 </del>
            <span class="current"> ￥ 100.00 </span>
          </p>
          <p>
            <button>加入购物车</button>
          </p>
        </div>
      </li>
    </ul>
    </div>





    <!-- 公共尾部开始 -->
    <div class="blank"></div>
    <div class="footer">
        <div class="banner">
            <!-- <img src="../images/mogu.png" alt=""> -->
            <div class="logo">
                <div>
                    <img src="https://s10.mogucdn.com/mlcdn/c45406/181112_4a8ch8fac2i12ib313hif4da35ed3_280x76.png">
                </div>
            </div>

            <!-- 新手帮助，保障权限 -->
            <div class="footer_help">
                <div>
                    <div class="footer_help_title">
                        新手帮助
                        <p></p>
                    </div>
                    <ul>
                        <li>常见问题</li>
                        <li>自助服务</li>
                        <li>联系客服</li>
                        <li>意见反馈</li>
                    </ul>
                </div>
                <div>
                    <div class="footer_help_title">
                        权益保障
                        <p></p>
                    </div>
                    <ul>
                        <li>全国包邮</li>
                        <li>七天无理由退货</li>
                        <li>退货运费补贴</li>
                        <li>限时发货</li>
                    </ul>
                </div>
                <div>
                    <div class="footer_help_title">
                        支付方式
                        <p></p>
                    </div>
                    <ul>
                        <li>支付宝支付</li>
                        <li>微信支付</li>
                        <li>白富美支付</li>
                    </ul>
                </div>
                <div>
                    <div class="footer_help_title">
                        移动客户端下载
                        <p></p>
                    </div>
                    <ul class="scan">
                        <li>蘑菇街<img src="../images/4.jpg" alt=""></li>
                        <li>美丽说<img src="../images/4.jpg" alt=""></li>
                        <li>uni引力<img src="../images/5.jpg" alt=""></li>
                    </ul>
                </div>
            </div>

            <!-- 关于我们 -->
            <div class="footer_msg">
                <ul>
                    <li>关于我们</li>
                    <li>招聘信息</li>
                    <li>联系我们</li>
                    <li>商家入驻</li>
                    <li>商家后台</li>
                    <li>规则中心</li>
                    <li>规则众议院</li>
                    <li>有害信息举报</li>
                    <li>用户隐私保护</li>
                </ul>
            </div>
            <!-- 公司版权 -->
            <div class="mgj_footer_hostname">
                <span>
                    ©2020 Mogu.com 杭州卷瓜网络有限公司
                </span>
            </div>
            <!-- 营业执照 -->
            <div class="footer_copyright">

            </div>

        </div>
    </div>
    <!-- 公共尾部结束 -->




    <!-- 公共的js -->


    <script src="../js/jquery.min.js"></script>
    <script src="../js/utils.js"></script>

    <script src="../js/public.js"></script>
    <script src="../js/index.js"></script>
</body>

</html>